<template>
    <div id="advert">
        <!--工具栏目-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-form :inline="true" :model="ActData">
                <el-form-item>
                    <el-input type="number" min="0" v-model="ActData.id" placeholder="请输入要搜索的用户ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="ActData.title" placeholder="请输入要搜索的内容"></el-input>
                </el-form-item>
                <el-select v-model="ActData.type" clearable placeholder="请选择">
                    <el-option label="用户引导" :value="0"></el-option>
                    <el-option label="课程广告" :value="1"></el-option>
                    <el-option label="首页引导" :value="2"></el-option>
                </el-select>
                <el-form-item>
                    <el-button type="primary" @click="postGain">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-table :data="ActIty" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="sort" label="排序" width="100" sortable>
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.sort" placeholder="请输入内容"
                              @blur="inputSort(scope.$index, scope.row)"
                              @focus="inputFocus(scope.$index, scope.row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="openMode" label="打开方式" width="100">
                <template slot-scope="scope">
                    <p v-if="scope.row.openMode === 0">网页</p>
                    <p v-else-if="scope.row.openMode === 1">原生</p>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" ></el-table-column>
            <el-table-column label="图片">
                <template slot-scope='scope'>
                    <img v-if="scope.row.image" :src='scope.row.image.path'
                         class="mainImg">
                    <span v-else>暂未有图片</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型">
                <template slot-scope="scope">
                   <p v-if="scope.row.type === 0">用户引导</p>
                   <p v-else-if="scope.row.type === 1">课程广告</p>
                    <p v-else-if="scope.row.type === 2">首页引导</p>
                </template>
            </el-table-column>
            <el-table-column prop="url" label="链接" width="130">
                <template slot-scope="scope">
                    <el-button type="info" size="small" :plain="true" @click="openUrl(scope.row)">打开连接</el-button>
                </template>
            </el-table-column>
            <el-table-column label="是否显示" width="120">
                <template slot-scope="scope">
                    <el-switch @change="switchType(scope.row)" v-model="scope.row.isShow" on-text="" off-text="" :on-value=1 :off-value=0></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size" :total="total" style="float:right;"></el-pagination>
        </el-col>

        <!--新增-->
        <el-dialog title="新增广告" :visible.sync="dialogVisibleAdd" :before-close="handleCloseAdd" v-if="dialogVisibleAdd" top="5%">
            <el-form ref="addForm" :model="addForm" :rules="addTalk" label-width="80px">
                <el-form-item label="类型" prop="type">
                    <template>
                        <el-radio class="radio" v-model="addForm.type" :label=0>用户引导</el-radio>
                        <el-radio class="radio" v-model="addForm.type" :label=1>课程广告</el-radio>
                        <el-radio class="radio" v-model="addForm.type" :label=2>首页引导</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="打开方式" prop="openMode">
                    <template>
                        <el-radio class="radio" v-model="addForm.openMode" :label=0>网页</el-radio>
                        <el-radio class="radio" v-model="addForm.openMode" :label=1>原生</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="addForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="URL" prop="url">
                    <el-input v-model="addForm.url" placeholder="请输入广告URL"></el-input>
                </el-form-item>
                <el-form-item label="排序值" prop="sort">
                    <el-input type="number" v-model="addForm.sort" placeholder="请输入广告排序值"></el-input>
                </el-form-item>
                <el-form-item label="扩充值" prop="value">
                    <el-input type="textarea" v-model="addForm.value" placeholder="请输入广告扩充值"></el-input>
                </el-form-item>
                <el-form-item label="是否显示" prop="isShow">
                    <el-switch v-model="addForm.isShow" on-text="" off-text="" :on-value=1 :off-value=0></el-switch>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload class="avatar-uploader" :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                            :show-file-list="false" :on-success="handleSuccess" :headers="MyHeaders" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click.native="dialogVisibleAdd = false">取消</el-button>
                <el-button type="primary" @click="addTalks('addForm')" :loading="addLoading">提交</el-button>
            </span>
        </el-dialog>

        <el-dialog title="编辑课程" v-model="editFormVisible" top="5%" >
            <el-form ref="editForm" :model="editForm" :rules="editFormRules" label-width="80px">
                <el-form-item label="类型" prop="type">
                    <template>
                        <el-radio class="radio" v-model="editForm.type" :label=0>用户引导</el-radio>
                        <el-radio class="radio" v-model="editForm.type" :label=1>课程广告</el-radio>
                        <el-radio class="radio" v-model="editForm.type" :label=2>首页引导</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="打开方式" prop="openMode">
                    <template>
                        <el-radio class="radio" v-model="editForm.openMode" :label=0>网页</el-radio>
                        <el-radio class="radio" v-model="editForm.openMode" :label=1>原生</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="editForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="URL" prop="url">
                    <el-input v-model="editForm.url" placeholder="请输入广告URL"></el-input>
                </el-form-item>
                <el-form-item label="排序值" prop="sort">
                    <el-input type="number" v-model="editForm.sort" placeholder="请输入广告排序值"></el-input>
                </el-form-item>
                <el-form-item label="扩充值" prop="value">
                    <el-input type="textarea" v-model="editForm.value" placeholder="请输入广告扩充值"></el-input>
                </el-form-item>
                <el-form-item label="是否显示" prop="isShow">
                    <el-switch v-model="editForm.isShow" on-text="" off-text="" :on-value=1 :off-value=0></el-switch>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload class="avatar-uploader" :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                               :show-file-list="false" :on-success="handleSuccess1" :headers="MyHeaders" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editSubmit('editForm')" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {advertAdd,advertDlete,advertList,advertListId,advertUpdate} from '../../api/api';
    export default {
        data() {
            return {
                ActIty: [],
                total: 0,
                page: 1,
                size: 10,
                ActData: {
                    id: null,
                    title: ''
                },
                sortNum: null,
                listLoading: false,
                dialogVisibleAdd: false,
                addForm: {
                    type: 0,
                    value: '',
                    title: '',
                    image: {
                        path: '',
                        remark: ''
                    },
                    openMode: 0,
                    url: '',
                    sort: 0,
                    isShow: 0
                },
                addLoading: false,
                imageUrl: '',
                MyHeaders: {'X-Authentication': JSON.parse(sessionStorage.getItem('user'))},
                addTalk: {
                    value: [
                        { required: true, message: '请输入广告扩充值', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ],
                    url: [
                        { required: true, message: '请输入广告URL', trigger: 'blur' }
                    ],

                },
                editFormVisible: false,
                editLoading: false,
                editFormRules: {
                    value: [
                        { required: true, message: '请输入广告扩充值', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ],
                    url: [
                        { required: true, message: '请输入广告URL', trigger: 'blur' }
                    ],
                },
                imageUrl1: null,
                editForm: {
                    type: 0,
                    value: '',
                    title: '',
                    image: {
                        path: '',
                        remark: ''
                    },
                    openMode: 0,
                    url: '',
                    sort: 0,
                    isShow: 0
                },
            }
        },
        methods: {
            selsChange: function (sels) {
                this.sels = sels;
            },
            handleCurrentChange(val) {
                this.page = val;
                this.postGain();
            },
            postGain(){
                let para = {
                    page: this.page,
                    size: this.size,
                    data: this.ActData
                };
                this.listLoading = true;
                advertList(para).then(res => {
                    console.log(res);
                    this.listLoading = false;
                    this.ActIty = res.data.content;
                    this.total = res.data.totalElements;
                })
            },
            inputFocus(index, row) {
                this.sortNum = row.sort;
            },
            inputSort(index, row) {
                if (this.sortNum === row.sort) return;
                this.listLoading = true;
                advertUpdate(row).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.postGain();
                    this.listLoading = false;
                })
            },
            switchType(row){
                this.listLoading = true;
                advertUpdate(row).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.postGain();
                    this.listLoading = false;
                })
            },
            openUrl(url){
                window.open(url.url);
            },
            handleAdd(){
                this.dialogVisibleAdd = true;
                this.addForm = {
                    type: 0,
                    value: '',
                    title: '',
                    image: {
                        path: '',
                        remark: ''
                    },
                    openMode: 0,
                    url: '',
                    sort: 0,
                    isShow: 0
                };
            },
            handleCloseAdd(done){ done();},
            handleSuccess(file) {
                this.imageUrl = file.data.pathFull;
                this.addForm.image.path = file.data.path;
            },
            addTalks(a){
                this.$refs[a].validate((valid) => {
                    if (valid) {
                        if(this.addForm.image.path === ''){this.$message({message: '请选择图片', type: 'error'});return;}
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = this.addForm;
                            advertAdd(para).then(res => {
                                console.log(res);
                                this.addLoading = false;
                                this.$message({message: res.message, type: 'success'});
                                this.dialogVisibleAdd = false;
                                this.postGain();
                            })
                        })
                    }
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleDel(row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {id: row.id};
                    let id = row.id;
                    advertDlete(id, para).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        this.postGain();
                    });
                }).catch(() => {
                });
            },
            handleEdit(row){
                let id = row.id;
                let para = {};
                this.editFormVisible = true;
                advertListId(id,para).then(res => {
                    console.log(res)
                    if(res.code !== 20000){
                        this.$message.error(res.message);
                    }else{
                        this.editForm = res.data;
                        this.imageUrl1 = res.data.image.path;
                    }
                });
            },
            editSubmit(a){
                this.$refs[a].validate((valid) => {
                    if(this.editForm.image.path === ''){this.$message({message: ' 请添加图片', type: 'error'});return;}
                    if (valid){
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = this.editForm;
                            advertUpdate(para).then((res) => {
                                console.log(res);
                                this.editLoading = false;
                                if(res.code !== 20000){
                                    this.$message({message: res.message, type: 'error'});
                                }else{
                                    this.$message({message: res.message, type: 'success'});
                                    this.editFormVisible = false;
                                    this.postGain();
                                }
                            });
                        });
                    }
                });
            },
            handleSuccess1(file) {
                this.imageUrl1 = file.data.pathFull;
                this.editForm.image.path = file.data.path;
            },
        },
        mounted(){
            this.postGain();
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #advert{
        .mainImg {
            width: auto;
            height: 80px;
            padding: 10px 0;
            vertical-align: middle;
        }
        .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 182px;
            text-align: center;
            line-height: 1;
            &:hover {
                border-color: #20a0ff;
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-select{
            input{
                width: 100%;
            }
        }
    }
    .clear { clear: both; }
    .clear:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
    .clear { zoom: 1 }
</style>